<template>
  <div class="users">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-input placeholder="请输入内容" v-model="searchVal" class="search-input">
      <el-button slot="append" icon="el-icon-search" @click='initList'></el-button>
    </el-input>
    <el-button type="primary" plain @click='addUser'>添加用户</el-button>
    <!-- 表格 -->
     <el-table
      class="mt-15 mb-15"
      :data="userList"
      border
      style="width: 100%">
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="电话">
      </el-table-column>
      <!-- 开关 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state" @change='changeUserState(scope.row)'>
          </el-switch>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit" plaintype="primary" @click='edit(scope.row)'></el-button>
          <el-button size="mini" icon="el-icon-delete" plain type="danger" @click='deleteUser(scope.row)'></el-button>
          <el-button size="mini" icon="el-icon-check" plain type="warning" @click='grantUser(scope.row)'></el-button>
        </template>
     </el-table-column>
    </el-table>
    <!-- 分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum">
    </el-pagination>
    <!-- 添加用户页面 -->
    <el-dialog title="添加用户" :visible.sync="addDialogFormVisible">
      <el-form :model="addform" :rules="rules" ref='addUserForm'>
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="addform.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="addform.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="addform.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="mobile">
          <el-input v-model="addform.mobile" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddUser('addUserForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑用户页面 -->
     <el-dialog title="编辑用户" :visible.sync="editDialogFormVisible">
      <el-form :model="editform" :rules="rules" ref='editUserForm'>
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="editform.username" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="editform.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="mobile">
          <el-input v-model="editform.mobile" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditUser('editUserForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配用户角色页面 -->
     <el-dialog title="分配用户角色" :visible.sync="grantDialogFormVisible">
      <el-form :model="grantform">
        <el-form-item label="当前用户">
          <el-tag type="info">{{grantform.username}}</el-tag>
        </el-form-item>
        <el-form-item label="请选择角色">
          <el-select v-model="grantform.rid" placeholder="请选择角色">
            <el-option :label="item.roleName" :value="item.id"  v-for="(item,index) in roleList" :key='index'></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="grantDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitGrantUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getUserList,
    changeState,
    addUser,
    delUser,
    editUser,
    grantUser,
    getRoleList
  } from "@/api";
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize = val;
        this.initList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pagenum = val;
        this.initList();
      },
      // 获取用户数据列表
      initList() {
        getUserList({
          query: this.searchVal,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }).then(res => {
          if (res.meta.status === 200) {
            this.totalNum = res.data.total;
            this.userList = res.data.users;
          } else {
            this.$message.error(res.meta.msg);
          }
        });
      },
      // 用户状态改变
      changeUserState(row) {
        console.log(row);
        changeState({ uid: row.id, type: row.mg_state }).then(res => {
          console.log(res);
          if (res.meta.status === 200) {
            this.$message.success("更换用户状态成功");
          } else {
            this.$message.error(res.meta.msg);
          }
        });
      },
      // 显示添加用户对话框
      addUser() {
        this.addDialogFormVisible = true;
      },
      // 提交添加用户
      submitAddUser(formData) {
        // 校验表单数据
        this.$refs[formData].validate(valide => {
          if (valide) {
            addUser(this.addform).then(res => {
              if (res.meta.status === 201) {
                this.$message.success("添加成功");
                this.addDialogFormVisible = false;
                this.initList();
              } else {
                this.$message.error("添加失败");
              }
            });
          } else {
            console.log("表单数据填写不正确");
          }
        });
      },
      // 删除用户提示框
      deleteUser(row) {
        this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // 删除请求
            delUser(row.id).then(res => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.initList();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      // 显示编辑用户对话框
      edit(row) {
        this.editDialogFormVisible = true;
        this.editform.username = row.username;
        this.editform.id = row.id;
        this.editform.email = row.email;
        this.editform.mobile = row.mobile;
      },
      // 提交编辑用户
      submitEditUser(formData) {
        // 校验表单数据
        this.$refs[formData].validate(valide => {
          if (valide) {
            editUser(this.editform).then(res => {
              if (res.meta.status === 200) {
                this.$message.success("编辑成功");
                this.editDialogFormVisible = false;
                this.initList();
              } else {
                this.$message.error("编辑失败");
              }
            });
          } else {
            console.log("表单数据填写不正确");
          }
        });
      },
      // 显示分配角色对话框
      grantUser(row) {
        this.grantDialogFormVisible = true;
        this.grantform.username = row.username;
        this.grantform.id = row.id;
        // 调用获取分配角色列表的函数
        getRoleList().then(res => {
          this.roleList = res.data;
        });
      },
      // 提交分配角色
      submitGrantUser() {
        grantUser(this.grantform).then(res => {
          if (res.meta.status === 200) {
            this.$message.success("设置角色成功");
            this.grantDialogFormVisible = false;
            this.initList();
          } else {
            this.$message.error("设置角色失败");
          }
        });
      }
    },
    created() {
      this.initList();
    },
    data() {
      return {
        // 用来保存角色列表
        roleList: [],
        searchVal: "",
        userList: [],
        // userState: false,
        pagenum: 1,
        pagesize: 10,
        totalNum: 0,
        formLabelWidth: "120px",
        // 添加用户对话框的显示
        addDialogFormVisible: false,
        // 编辑用户对话框显示
        editDialogFormVisible: false,
        // 分配角色的对话框显示
        grantDialogFormVisible: false,
        // 添加用户的表单对象
        addform: {
          username: "",
          password: "",
          email: "",
          mobile: ""
        },
        // 编辑用户的表单对象
        editform: {
          username: "",
          id: "",
          email: "",
          mobile: ""
        },
        // 分配用户角色的表单对象
        grantform: {
          username: "",
          id: "",
          rid: ""
        },
        // 校验规则
        rules: {
          username: [
            { required: true, message: "请输入用户名", trigger: "blur" }
          ],
          password: [{ required: true, message: "请输入密码", trigger: "blur" }],
          email: [
            { required: true, message: "请输入邮箱地址", trigger: "blur" },
            {
              type: "email",
              message: "请输入正确的邮箱地址",
              trigger: "blur,change"
            }
          ],
          mobile: [{ required: true, message: "电话不能为空" }]
        }
      };
    }
  };
</script>
<style lang="scss" scoped>
  .users {
    .search-input {
      width: 300px;
    }
  }
</style>

